<template>
  <el-dialog
    v-el-drag-dialog
    class="dialog-small dvb-dialog"
    :title="$t('DVB频道')"
    :close-on-click-modal="!fetching"
    :close-on-press-escape="!fetching"
    :show-close="!fetching"
    :visible="visible"
    width="520px"
    @update:visible="updateVisible"
    @open="openHandle">

    <template v-if="opType === '1' && self_form">
      <el-tabs style="height: 100%" v-model="self_form.dvbType" type="border-card">
        <el-tab-pane :label="$t('手动输入')" name="1">
          <add-base-form
            ref="addForm"
            :form="self_form"
            :rules="formRules">
            <el-form-item :label="$t('频道设置')" prop="content">
              <el-input
                v-model="self_form.content"
                :rows="3" wrap="off"
                clearable
                type="textarea"
                maxlength="500"
                :show-word-limit="false"></el-input>
            </el-form-item>
          </add-base-form>
        </el-tab-pane>
        <el-tab-pane :label="$t('自动导入')" name="2">
          <dvb-auto-form
            ref="autoForm"
            :form="self_form"
            :rules="autoFormRules"></dvb-auto-form>
        </el-tab-pane>
      </el-tabs>
    </template>
    <template v-else-if="opType === '2' && self_form">
      <div>
        <edit-base-form
          ref="editForm"
          :form="self_form"
          :rules="formRules">
          <el-form-item :label="$t('频道设置')">
            <el-input :value="self_form.content" style="height: 90px;" type="textarea" :rows="3" clearable></el-input>
          </el-form-item>
        </edit-base-form>
      </div>
    </template>

    <div slot="footer" class="dialog-footer">
      <bs-confirm-button-icon :disabled="fetching" size="mini" @click.native="okClick" />
      <bs-cancel-button-icon :disabled="fetching" size="mini" @click.native="cancelClick" />
    </div>
  </el-dialog>
</template>

<script>
import AddBaseForm from './Form/AddBaseForm'
import EditBaseForm from './Form/EditBaseForm'
import DvbAutoForm from './Form/DvbAutoForm'

export default {
  components: {
    AddBaseForm,
    EditBaseForm,
    DvbAutoForm
  },
  props: {
    opType: {
      type: String,
      default: '1' // 1 新增 2 编辑
    },
    form: {
      type: Object,
      default() {
        return null
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const checkTerminalId = (rule, value, callback) => {
      if (!this.self_form.attributes.terminalId) {
        return callback(new Error('请选择终端'))
      }
      callback()
    }

    return {
      self_form: null,
      fetching: false, // 异步处理进行中标识符
      formRules: {
        name: [
          { required: true, message: '名称不能为空' }
        ],
        content: [
          { required: true, message: '地址不能为空' }
        ]
      },
      autoFormRules: {
        terminalId: [
          {validator: checkTerminalId}
        ]
      }
    }
  },
  watch: {
    form(v) {
      if (!v) {
        this.self_form = null
      } else {
        this.self_form = {
          ...v
        }
      }
    }
  },
  computed: {
  },
  methods: {
    openHandle() {
      this.$nextTick(()=>{
        this.$refs.addForm && this.$refs.addForm.$refs.form.clearValidate()
        this.$refs.autoForm && this.$refs.autoForm.$refs.form.clearValidate()
        this.$refs.editForm && this.$refs.editForm.$refs.form.clearValidate()
      })


      this.$eventBus.$emit('initMethod',this.opType)

    },
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    okClick(v) {
      this.fetching = true
      if (this.opType === '1') {
        if (this.self_form.dvbType === '1') {
          this.$refs.addForm.$refs.form.validate(this._valiCb(() => {
            this.$emit('addClick', this.self_form, this.fetchingEndCb)
          }))
        } else {
          this.$refs.autoForm.$refs.form.validate(this._valiCb(() => {
            console.log(this.form.attributes.terminalId, '==========================================')
            if(!this.form.attributes.terminalId || this.form.attributes.terminalId == '') {
              this.$alert('提示','请选择终端')
              this.fetching = false
              return
            }
            this.$emit('addClick', this.self_form, this.fetchingEndCb)
          }))
        }
      } else if (this.opType === '2') {
        this.$refs.editForm.$refs.form.validate(this._valiCb(() => {
          console.log(this.self_form, '编辑')
          this.$emit('updateClick', this.self_form, this.fetchingEndCb)
        }))
      } else {
        this.updateVisible(false)
      }
      this.fetching = false
    },
    preClick() {

    },
    fetchingEndCb(stopClose) {
      this.fetching = false
      !stopClose && this.updateVisible(false)
    },
    cancelClick() {
      this.updateVisible(false)
    },
    _valiCb(cb) { // 验证通过后的回调
      return (bool, err) => {
        if (bool) {
          cb && cb()
        } else {
          for(const key in err) {
            this.$message.error(err[key][0].message)
            break;
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.dvb-dialog {
  ::v-deep .el-dialog__body {
    padding: 0 !important;
  }

  ::v-deep .el-dialog {
    height: 620px !important;
  }

  .form {
    margin: 0;
    width: 460px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
.tips-text {
  text-align: center;
}
</style>
